<!-- 附近企业 -->
<template>
  <div class="container">
    <headerNav />
    <div class="page-box">
      <div id="container" class="map" tabindex="0"></div>
      <div class="searchEnterpriseName">
        <div class="searchBar">
          <input type="text" placeholder="请输入您要查询的地址" />
          <span>查询</span>
        </div>
        <div class="EnterpriseName">
          <ul>
            <li v-for="(item, index) in lzdqgs" :key="index" class="changeHanld">
              <i>
                <span>{{ index + 1 }}</span>
                <img
                  src="http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png"
                  class="Lzssgs_content_lis_imgs"
                  alt
                />
              </i>
              <div class="Enterpriseinfo singlerows">
                <div class="Enterpriseinfo_t">{{ item.companyName }}</div>
                <div class="Enterpriseinfo_b singlerows">{{ item.companyAddr }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <footerNav />
    <navBar />
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import headerNav from "../../components/headerNav.vue";
import footerNav from "../../components/footerNav.vue";
import navBar from "../../components/navigation.vue";
import { postRequest, commonRequest } from "../../api/api.js";
import { get, post } from "../../http/axios.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    headerNav,
    footerNav,
    navBar
  },
  data() {
    //这里存放数据
    return {
      /* 自己的代码 */
      map: "", // 地图实例
      cityData: [], // 城市数据
      infoWindow: "", //获取窗口信息
      /* 别人的代码 */
      Lzmarkers: [],
      map: "",
      infoWindow: "",
      lzdqgs: "",
      Lzdqgspd: false,
      Lzcxvalue: "",
      Lztgnf: "",
      Lzxmmctj: ""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /* 自己的 */
    // AMapLoader() {
    //   return new Promise((resolve) => {
    //     if (window.AMap) {
    //       resolve(window.AMap);
    //     } else {
    //       let key = "ff37fcee94086ff348d7a670ebf08e85";
    //       var url = `https://webapi.amap.com/maps?v=2.0&key=${key}&plugin=AMap.MarkerClusterer`;
    //       var jsapi = document.createElement("script");
    //       jsapi.charset = "utf-8";
    //       jsapi.src = url;
    //       document.head.appendChild(jsapi);
    //     }
    //     window.onload = () => {
    //       resolve(window.AMap);
    //     };
    //   });
    // },
    // initMap() {
    //   return new AMap.Map("container", {
    //     zoom: 12, //级别
    //     // center: [companyLongitude, companyLatitude], //中心点坐标
    //     viewMode: "3D", //使用3D视图
    //     resizeEnable: true,
    //   });
    // },
    // // 获取窗口信息
    // markerClick(e) {
    //   this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(10, 0) });
    //   this.infoWindow.setContent(e.target.content);
    //   this.infoWindow.open(this.map, e.target.getPosition());
    // },
    // addMarkers() {
    //   const _this = this;
    //   let markerList = [];
    //   let icon = "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
    //   _this.cityData.forEach((el, index) => {
    //     var marker = new AMap.Marker({
    //       content: `<div  style="background-image:url(${icon});color:#fff;text-align:center;height:32px;width:19px">${
    //         index + 1
    //       }</div>`,
    //       position: new AMap.LngLat(el.lng, el.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //       zoom: 9,
    //     });
    //     markerList.push(marker);
    //     marker.content = `公司名:${el.companyName}</br>地址:${el.companyAddr}`;
    //     marker.on("mouseover", this.markerClick);
    //   });
    //   console.log(this.map.getZoom());
    //   let posotion = new AMap.LngLat(
    //     _this.cityData[0].lng,
    //     _this.cityData[0].lat
    //   );
    //   this.map.setCenter(posotion);
    //   this.map.setZoom(15);
    //   this.map.add(markerList);
    // },
    /* 别人的代码 */
    // 查询
    Lzcx() {
      var that = this;
      if (that.Lzcxvalue == "") {
        alert("请输入查询地址");
      } else {
        var geocoder = new AMap.Geocoder({
          city: "" //城市设为北京，默认：“全国”
        });
        var address = that.Lzcxvalue;
        geocoder.getLocation(address, function(status, result) {
          if (status === "complete" && result.geocodes.length) {
            lat = result.geocodes[0].location.lat;
            lng = result.geocodes[0].location.lng;
            that.Lzcsdy(lat, lng, 15);
          } else {
            alert("查询位置失败");
          }
        });
      }
    },
    // 初始调用
    Lzcsdy(lat, lng, zomers) {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [lng, lat],
        zoom: zomers,
        zooms: [5, 20]
      });
      this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(10, 0) });
      if (zomers > 11) {
        this.Lzxxqq(lng, lat, zomers);
      } else {
        this.Lzdaqq(lng, lat, zomers);
      }
      this.map.on("moveend", this.logMapinfo);
    },
    logMapinfo() {
      this.lzdqgs = "";
      this.Lzdqgspd = false;
      this.map.remove(this.Lzmarkers);
      var bounds = this.map.getBounds();
      var zoom = this.map.getZoom(); //获取当前地图级别
      var center = this.map.getCenter(); //获取当前地图中心位置
      if (zoom > 11) {
        this.Lzxxqq(center.lng, center.lat, zoom);
      } else {
        this.Lzdaqq(center.lng, center.lat, zoom);
      }
    },
    markerClick(e) {
      this.infoWindow.setContent(e.target.content);
      this.infoWindow.open(this.map, e.target.getPosition());
    },
    // 详细展示
    Lzxxzs(data) {
      var that = this;
      that.map.remove(that.Lzmarkers);
      for (var i = 0, marker; i < data.length; i++) {
        var Lziop = [];
        Lziop.push(data[i].lng);
        Lziop.push(data[i].lat);
        if (i < 10) {
          marker = new AMap.Marker({
            content:
              '<div style="text-align: center;color: #fff;position: relative;z-index: 1;width: 24px;top: 2px">' +
              (i + 1) +
              '</div><img id="Lzxstid' +
              i +
              '" src="http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" style="top: 0px;width: 24px;font-size:14px; left: 0px;position: absolute;">',
            position: Lziop,
            map: that.map
          });
          marker.content =
            "公司名: " +
            data[i].companyName +
            "<br/>地址: " +
            data[i].companyAddr;
          marker.on("mouseover", that.markerClick);
        } else {
          marker = new AMap.Marker({
            content:
              '<div style="width: 9px; height: 9px;border-radius: 50%;background-color: red;opacity: 0.5;"></div>',
            position: Lziop,
            map: that.map
          });
        }
        that.Lzmarkers.push(marker);
      }
      setTimeout(function() {
        for (var i = 0; i < 10; i++) {
          var id = "Lzxstid" + i;
          if (document.getElementById(id) == null) {
          } else {
            var idf = document.getElementById(id).parentNode.parentNode;
            idf.classList.add("Lzlmtj");
          }
        }
        var Lzlmtj = document.getElementsByClassName("Lzlmtj");
        var Lzssgs_content_lis_imgs = document.getElementsByClassName(
          "Lzssgs_content_lis_imgs"
        );
        for (let i = 0; i < Lzlmtj.length; i++) {
          Lzlmtj[i].onmouseover = function() {
            var id = "Lzxstid" + i;
            var idf = document.getElementById(id);
            if (idf != null) {
              idf.src =
                "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
            }
            Lzssgs_content_lis_imgs[i].src =
              "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
          };
          Lzlmtj[i].onmouseout = function() {
            var id = "Lzxstid" + i;
            var idf = document.getElementById(id);
            if (idf != null) {
              idf.src =
                "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
            }
            Lzssgs_content_lis_imgs[i].src =
              "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
          };
        }
      }, 200);
    },
    // 数量展示
    Lzslzs(data) {
      var that = this;
      that.map.remove(that.Lzmarkers);
      for (var i = 0, marker; i < data.length; i++) {
        var Lziop = [];
        Lziop.push(data[i].lng);
        Lziop.push(data[i].lat);
        if (data[i].cnt > 10000) {
          marker = new AMap.Marker({
            content:
              '<div style="width: 90px; height: 90px; background-image: url(&quot;https://webapi.amap.com/theme/v1.3/m5.png&quot;); text-align: center; line-height: 90px; background-position: 0px 0px; color: rgb(0, 0, 0); font-size: 12px; cursor: pointer;">' +
              data[i].cnt +
              "</div>",
            position: Lziop,
            map: that.map,
            offset: new AMap.Pixel(-15, -15)
          });
        }
        if (data[i].cnt <= 10000 && data[i].cnt > 1000) {
          marker = new AMap.Marker({
            content:
              '<div style="width: 78px; height: 78px; background-image: url(&quot;https://webapi.amap.com/theme/v1.3/m4.png&quot;); text-align: center; line-height: 78px; background-position: 0px 0px; color: rgb(0, 0, 0); font-size: 12px; cursor: pointer;">' +
              data[i].cnt +
              "</div>",
            position: Lziop,
            map: that.map,
            offset: new AMap.Pixel(-15, -15)
          });
        }
        if (data[i].cnt <= 1000 && data[i].cnt > 100) {
          marker = new AMap.Marker({
            content:
              '<div style="width: 66px; height: 66px; background-image: url(&quot;https://webapi.amap.com/theme/v1.3/m3.png&quot;); text-align: center; line-height: 66px; background-position: 0px 0px; color: rgb(0, 0, 0); font-size: 12px; cursor: pointer;">' +
              data[i].cnt +
              "</div>",
            position: Lziop,
            map: that.map,
            offset: new AMap.Pixel(-15, -15)
          });
        }
        if (data[i].cnt <= 100 && data[i].cnt > 10) {
          marker = new AMap.Marker({
            content:
              '<div style="width: 66px; height: 66px; background-image: url(&quot;https://webapi.amap.com/theme/v1.3/m3.png&quot;); text-align: center; line-height: 66px; background-position: 0px 0px; color: rgb(0, 0, 0); font-size: 12px; cursor: pointer;">' +
              data[i].cnt +
              "</div>",
            position: Lziop,
            map: that.map,
            offset: new AMap.Pixel(-15, -15)
          });
        }
        if (data[i].cnt <= 10) {
          marker = new AMap.Marker({
            content:
              '<div style="width: 53px; height: 53px; background-image: url(&quot;https://webapi.amap.com/theme/v1.3/m1.png&quot;); text-align: center; line-height: 53px; background-position: 0px 0px; color: rgb(0, 0, 0); font-size: 12px; cursor: pointer;">' +
              data[i].cnt +
              "</div>",
            position: Lziop,
            map: that.map,
            offset: new AMap.Pixel(-36, -24)
          });
        }
        marker.projectId = Lziop;
        marker.on("click", that.Lzdjfa);
        that.Lzmarkers.push(marker);
      }
    },
    Lzdjfa(e) {
      var lng = e.target.projectId[0];
      var lat = e.target.projectId[1];
      this.Lzcsdy(lat, lng, Number(12));
    },
    // 大请求
    Lzdaqq(lng, lat, zoom) {
      get(
        "https://api.51bmj.cn/dm/unauth/company/cnt?lat=" +
          lat +
          "&lng=" +
          lng +
          "&zoom=" +
          Math.floor(zoom) +
          "&size=200&pageNo=1"
      ).then(mes => {
        // console.log(mes);
        if (mes.result != null) {
          this.Lzslzs(mes.result);
        }
      });
    },
    // 详细请求
    Lzxxqq(lng, lat, zoom) {
      var that = this;
      if (that.Lztgnf == "" && that.Lzxmmctj == "") {
        postRequest("/api/es/company/queryNearbyCompanys.json", {
          area: "",
          city: "",
          companyName: "",
          lat: lat,
          lng: lng,
          pageNo: 0,
          province: "",
          size: 200,
          zoom: zoom
        }).then(mes => {
          that.lzdqgs = [];
          that.Lzdqgspd = false;
          if (mes.result == null) {
          } else {
            if (mes.result.length > 10) {
              for (let i = 0; i < 10; i++) {
                that.lzdqgs.push(mes.result[i]);
              }
              that.Lzdqgspd = true;
            } else {
              that.lzdqgs = mes.result;
              that.Lzdqgspd = true;
            }
            that.Lzxxzs(mes.result);
          }
        });
      } else {
        commonRequest(
          `/dm/unauth/company/list?lat=${lat}&lng=${lng}&zoom=${zoom}&size=200&pageNo=1&passYear=${that.Lztgnf}&prjName=${that.Lzxmmctj}`
        ).then(mes => {
          that.lzdqgs = [];
          that.Lzdqgspd = false;
          if (mes.data.result == null) {
          } else {
            if (mes.data.result.length > 10) {
              for (let i = 0; i < 10; i++) {
                that.lzdqgs.push(mes.data.result[i]);
              }
              that.Lzdqgspd = true;
            } else {
              that.lzdqgs = mes.data.result;
              that.Lzdqgspd = true;
            }
            that.Lzxxzs(mes.data.result);
          }
        });
      }
    },
    // 手指移入
    Lzszyr(index) {
      var Lzssgs_content_lis_imgs = document.getElementsByClassName(
        "Lzssgs_content_lis_imgs"
      );
      var id = "Lzxstid" + index;
      var idf = document.getElementById(id);
      if (idf == null) {
      } else {
        idf.parentNode.parentNode.classList.add("Lzlmtj_se");
        idf.src =
          "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
      }
      Lzssgs_content_lis_imgs[index].src =
        "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
    },
    // 手指移出
    Lzszyc(index) {
      var Lzssgs_content_lis_imgs = document.getElementsByClassName(
        "Lzssgs_content_lis_imgs"
      );
      var id = "Lzxstid" + index;
      var idf = document.getElementById(id);
      if (idf == null) {
      } else {
        idf.parentNode.parentNode.classList.remove("Lzlmtj_se");
        idf.src =
          "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
      }
      Lzssgs_content_lis_imgs[index].src =
        "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
    },
    // 跳转荣誉
    Lzdzry(name) {
      var url = "/app/specific-result.html?company=" + name;
      window.open(url, "_blank");
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    /* 自己的代码 */
    // this.AMapLoader().then(() => {
    //   const _this = this;
    //   _this.map = _this.initMap();
    //   let { companyLatitude, companyLongitude } = JSON.parse(
    //     sessionStorage.getItem("enterpriseLocation")
    //   );
    //   postRequest("/api/es/company/queryNearbyCompanys.json", {
    //     area: "",
    //     city: "",
    //     companyName: "",
    //     lat: companyLatitude,
    //     lng: companyLongitude,
    //     pageNo: 0,
    //     province: "",
    //     size: 200,
    //     zoom: 15,
    //   }).then((res) => {
    //     const { result } = res;
    //     _this.cityData = result.splice(0, 10);
    //     _this.addMarkers();
    //   });
    // });
    /* 别人的代码 */
    var that = this;
    var geocoder = new AMap.Geocoder({
      city: "" //城市设为北京，默认：“全国”
    });
    if (
      location.href.split("nf=")[1] != undefined &&
      location.href.split("nf=")[1] != "undefined"
    ) {
      that.Lztgnf = location.href.split("nf=")[1].split("&")[0];
    }
    if (
      decodeURI(location.href.split("xztj=")[1]) != undefined &&
      decodeURI(location.href.split("xztj=")[1]) != "undefined"
    ) {
      that.Lzxmmctj = decodeURI(location.href.split("xztj=")[1]);
    }
    var address = decodeURI(location.href.split("company=")[1]);
    if (address == undefined || address == "undefined") {
      var map = new AMap.Map("container", {
        resizeEnable: true
      });
      console.log(map.getCenter());
      that.Lzcsdy(map.getCenter().lat, map.getCenter().lng, 13);
    } else {
      address = address.split("&")[0];
      geocoder.getLocation(address, function(status, result) {
        if (status === "complete" && result.geocodes.length) {
          var lat = result.geocodes[0].location.lat;
          var lng = result.geocodes[0].location.lng;
          that.Lzcsdy(lat, lng, 15);
        } else {
          alert("根据地址查询位置失败");
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
#container {
  // width: calc(100vw - 18px);
  height: calc(100vh - 100px);
}
.amap-icon img,
.amap-marker-content img {
  width: 25px;
  height: 34px;
}
.page-box {
  position: relative;

  .searchEnterpriseName {
    position: absolute;
    // background-color: red;
    left: 82px;
    top: 30px;
    z-index: 999;
    .searchBar {
      display: flex;
      input {
        width: 350px;
        height: 307x;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding-left: 10px;
        background: #fff;
      }
      span {
        padding: 6px 12px;
        border-radius: 4px;
        background-color: #007bff;
        margin-left: 10px;
        color: #fff;
      }
    }
    .EnterpriseName {
      background-color: rgba(255, 255, 255, 0.4);
      border: 1px solid #ccc;
      margin-top: 15px;
      width: 350px;
      ul {
        li {
          padding: 7px 15px 0;
          display: flex;
          align-items: center;
          i {
            position: relative;
            margin-right: 10px;
            font-style: normal;
            span {
              position: absolute;
              left: 10px;
              top: 5px;
              color: #fff;
              z-index: 10;
              font-size: 14px;
            }
            img {
              height: 40px;
            }
          }
          &:nth-child(10) span {
            left: 4px;
            top: 4px;
          }
          .Enterpriseinfo {
            font-size: 13px;
            width: 288px;
            .Enterpriseinfo_t {
              color: #007bff;
            }
            .Enterpriseinfo_b {
            }
          }
        }
      }
    }
  }
}
</style>
